<template>
  <div>
    <a-modal title="预览事件" :visible="visible" @ok="handleOk" @cancel="handleCancel" ok-text="确认" cancel-text="取消">
      <a-row type="flex">
        <a-col>标题:</a-col>
        <a-col push="1">{{ info && info.title }}</a-col>
      </a-row>
      <a-row type="flex">
        <a-col>描述:</a-col>
        <a-col push="1">
          {{ info && info.extendedProps && info.extendedProps.description }}
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col>时间:</a-col>
        <a-col push="1">
          <span>{{ info && info.startStr | dateFilter }}</span>
          <span v-if="info && info.endStr">
            ~ {{ info && info.endStr | dateFilter }}
          </span>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  data () {
    return {
    }
  },
  props: {
    info: {
      type: Object,
      default: () => { }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'visible',
    event: 'cancel'
  },
  methods: {
    handleCancel () {
      this.$emit('cancel', !this.visible)
    },
    handleOk () {
      this.$emit('cancel', !this.visible)
    }
  },
  filters: {
    dateFilter (date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}

</script>

<style>
</style>
